<template>
    <div class="ele-body">
        <el-card shadow="never" body-style="padding:22px 22px 0 22px;">
            <el-form :model="table.where" label-width="85px" class="ele-form-search">
                <el-row :gutter="5">
                    <el-col :md="5" :sm="12">
                        <el-form-item label="姓名：">
                            <el-input v-model="table.where.name" placeholder="请输入姓名" size="small" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :md="5" :sm="12">
                        <el-form-item label="学号：">
                            <el-input v-model="table.where.number" placeholder="请输入" size="small" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <div class="ele-form-actions">
                        <el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search" class="ele-btn-icon">查询
                        </el-button>
                        <el-button @click="(table.where={})&&$refs.table.reload()">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <el-card shadow="never">
            <!-- 表格工具栏 -->
            <div class="ele-table-tool">
                <div class="ele-table-tool-left">
                    <router-link to="/attend/student/addleave-record">
                        <el-button type="primary" icon="el-icon-plus" class="ele-btn-icon" size="small">添加</el-button>
                    </router-link>
                </div>
            </div>
            <!-- 数据表格 -->
            <ele-data-table ref="table" :config="table" highlight-current-row>
                <template slot-scope="{index}">
                    <el-table-column type="index" label="序号" :index="index" width="60" align="center" fixed="left" show-overflow-tooltip/>
                    <el-table-column prop="name" label="请假人" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="number" label="学号" show-overflow-tooltip min-width="110"/>

                    <el-table-column prop="leave_name" label="请假类型" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="first_time" label="开始时间" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="last_time" label="结束时间" show-overflow-tooltip min-width="110"/>

                    <el-table-column prop="status" label="审核状态" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="create_time" label="创建时间" show-overflow-tooltip min-width="110"/>

                    <el-table-column label="操作" align="center" width="200px" :resizable="false" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="cancel(scope.row)" type="warning" size="mini" icon="el-icon-back">撤销</el-button>
                            <el-button @click="remove(scope.row)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </template>
            </ele-data-table>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "LeaveRecord",
    data() {
        return {
            table: { // 表格配置
                url: '/api/attend/student/leavelog',
                where: {},
                page: true
            }
        }
    },

    methods: {
        remove(row) {
            this.$confirm('确定要删除吗？', '提示', {type: 'warning'}).then(() => {
                const loading = this.$loading({lock: true});
                this.$http.get('/api/attend/student/leavelog/delete?id=' + row.id).then(res => {
                    loading.close();
                    if (res.data.code == 200) {
                        this.$message.success(res.data.msg);
                        this.$refs.table.reload();    
                    } else {
                        loading.close();
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => 0);
        },

        cancel(row) {
            this.$confirm('确定要撤销吗？', '提示', {type: 'warning'}).then(() => {
                const loading = this.$loading({lock: true});
                this.$http.get('/api/attend/student/leavelog/cancel?id=' + row.id).then(res => {
                    loading.close();
                    if (res.data.code == 200) {
                        this.$message.success(res.data.msg);
                        this.$refs.table.reload();    
                    } else {
                        loading.close();
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => 0);
        }
    }
}
</script>